<template>
  <el-drawer
    v-model="drawerVisible"
    :size="650"
    title="高级查询"
    @closed="$emit('closed')"
    append-to-body
  >
    <el-container v-loading="saveLoading">
      <el-main>
        <el-form
          :model="form"
          :rules="rules"
          ref="saveForm"
          label-width="140px"
        >
          <el-card class="elCard" style="margin-bottom: 10px">
            <el-form-item label="企业名称" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入企业名称"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item label="统一社会信用代码" prop="unifiedCode">
              <el-input
                v-model="form.unifiedCode"
                placeholder="请输入统一社会信用代码"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="企业属地" prop="block">
              <hh-dict
                v-model="form.block"
                dictType="block"
                placeholder="请选择企业属地"
                clearable
                filterable
              ></hh-dict>
            </el-form-item>
            <el-form-item label="注册地址" prop="address">
              <el-input
                v-model="form.address"
                placeholder="请输入注册地址"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="注册日期范围" prop="regDate">
              <el-date-picker
                v-model="regDateScope"
                type="daterange"
                range-separator="至"
                start-placeholder="最早注册日期"
                end-placeholder="最晚注册日期"
                value-format="YYYY-MM-DD"
                :clearable="true"
              />
            </el-form-item>
            <el-form-item label="联系电话" prop="contactNumber">
              <el-input
                v-model="form.contactNumber"
                placeholder="请输入联系电话"
                clearable
              ></el-input>
            </el-form-item>
          </el-card>

          <el-row>
            <el-col :span="12">
              <el-form-item label="摸查情况" prop="status">
                <hh-dict
                  v-model="form.status"
                  dictType="interview_status"
                  placeholder="请选择摸查情况"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否重点企业" prop="keyEnterprises">
                <hh-dict
                  v-model="form.keyEnterprises"
                  dictType="enterprise_situation"
                  placeholder="请选择是否重点企业"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用工情况" prop="employmentStatus">
                <hh-dict
                  v-model="form.employmentStatus"
                  dictType="employment_status"
                  placeholder="请选择用工情况"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用工人数" prop="employeeCount">
                <el-input
                  v-model="form.employeeCount"
                  placeholder="请输入用工人数"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用工计划" prop="employmentPlay">
                <hh-dict
                  v-model="form.employmentPlay"
                  dictType="plan"
                  placeholder="请选择用工计划"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经营情况" prop="opStatus">
                <hh-dict
                  v-model="form.opStatus"
                  dictType="op_status"
                  placeholder="请选择经营情况"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人" prop="contact">
                <el-input
                  v-model="form.contact"
                  placeholder="请输入联系人"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人电话" prop="contactPhone">
                <el-input
                  v-model="form.contactPhone"
                  placeholder="请输入联系人电话"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="企业办公地址" prop="officeAddress">
            <el-input
              v-model="form.officeAddress"
              placeholder="请输入企业办公地址"
              clearable
            ></el-input>
          </el-form-item>

          <div class="subTitle">
            <span>服务需求</span>
          </div>

          <el-row>
            <el-col :span="12">
              <el-form-item label="用工指导" prop="employmentGuidance">
                <hh-dict
                  v-model="form.employmentGuidance"
                  dictType="key_enterprise"
                  placeholder="请选择用工指导"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="技能培训" prop="skillsTraining">
                <hh-dict
                  v-model="form.skillsTraining"
                  dictType="key_enterprise"
                  placeholder="请选择技能培训"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="政策支持" prop="policySupport">
                <hh-dict
                  v-model="form.policySupport"
                  dictType="key_enterprise"
                  placeholder="请选择政策支持"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="其他" prop="other">
                <hh-dict
                  v-model="form.other"
                  dictType="key_enterprise"
                  placeholder="请选择其他"
                  clearable
                  filterable
                ></hh-dict>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <div class="form-footer">
          <!-- <el-button type="" @click="close">取消</el-button> -->
          <el-button type="" @click="clear">清空查询条件</el-button>
          <el-button type="primary" @click="submit">查询</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>
export default {
  name: "enterprise-filter",
  emits: ["success", "closed"],
  data() {
    return {
      drawerVisible: false,
      form: {
        name: "",
        personCount: null,
        contact: "",
        minRegDate: "",
        maxRegDate: "",
        employeeCount: null,
        status: "",
        employmentPlay: "",
        serviceRequirement: "",
        opStatus: "",
        employmentStatus: "",
        contactPhone: "",
        officeAddress: "",
        insrcInfo: "",
        keyEnterprises: "",

        employmentGuidance: "",
        skillsTraining: "",
        policySupport: "",
        other: "",
      },
      rules: {
        // roleName: [{ required: true, message: "请输入企业名称" }],

        employeeCount: [
          {
            pattern: /^(0|\+?[1-9][0-9]*)$/,
            message: "请输入正确的用工人数",
            trigger: "blur",
          },
        ],
      },
      regDateScope: [],
    };
  },
  watch: {
    //日期范围转换
    regDateScope(val) {
      if (val) {
        this.form.minRegDate = val[0];
        this.form.maxRegDate = val[1];
      } else {
        this.form.minRegDate = "";
        this.form.maxRegDate = "";
      }
    },
  },
  mounted() {},
  methods: {
    //打开
    open(search) {
      this.drawerVisible = true;
      Object.assign(this.form, search);
      //日期范围转换
      if (this.form.minRegDate && this.form.maxRegDate) {
        this.regDateScope[0] = this.form.minRegDate;
        this.regDateScope[1] = this.form.maxRegDate;
      }
    },
    //提交
    submit() {
      this.$refs.saveForm.validate(async (valid) => {
        if (valid) {
          this.$emit("onRefresh", this.form);
          this.close();
        }
      });
    },
    //表单注入数据
    clear() {
      let form = {
        name: "",
        unifiedCode: "",
        address: "",
        block: "",
        contactNumber: "",
        personCount: null,
        contact: "",
        minRegDate: "",
        maxRegDate: "",
        employeeCount: null,
        status: "",
        employmentPlay: "",
        serviceRequirement: "",
        opStatus: "",
        employmentStatus: "",
        contactPhone: "",
        officeAddress: "",
        insrcInfo: "",
        keyEnterprises: "",

        employmentGuidance: "",
        skillsTraining: "",
        policySupport: "",
        other: "",
      };
      this.regDateScope = [];
      Object.assign(this.form, form);
    },
    // 关闭页面
    close() {
      this.$emit("closed");
    },
  },
};
</script>

<style></style>
